<template>
    <Header title="店铺"></Header>
    <div class="foodClassify">
        <div class="name">
            {{title}}
            <img :src="img" class="store_img">
        </div>


        <div class="classify">
          <van-tabs>
            <van-tab v-for="(i,index) in storeData" :title="i.name">

              <FoodList :foodData="i.data"></FoodList>
            </van-tab>


            
          </van-tabs>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="ustore.$state.cartList.length" @click="toCart"/>
            <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addToCart"/>
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>

    </div>

</template>

<script setup>
import Header from '@/components/Header.vue';
import { onMounted, reactive,toRefs } from 'vue';
import { getStoreData } from '@/request/api';
import { useRoute } from 'vue-router';
import FoodList from './FoodList.vue';
import { userStore } from '@/store/UserStore';
import { useRouter } from 'vue-router';

const router = useRouter();
const ustore = userStore();
const route = useRoute();
const data = reactive({
  storeData:[],
  title:'',
  img:''
})
const {storeData,title,img} = {...toRefs(data)};

const getData = ()=>{
  getStoreData().then(res=>{
    if(res.status == 200){
      res.data.stores.forEach((item)=>{
        if(item.title == route.query.title){
          storeData.value = item.storeData
          title.value = item.title
          img.value = item.img
        }
      })
    }
  })
}
onMounted(()=>{
  getData()
})

const addToCart=()=>{
  let newList = []
  storeData.value[0].data.items.forEach((item)=>{
    item.children.forEach((item2)=>{
      if(item2.num>0){
        newList.push(item2)
      }
    })
  })
  if(newList.length==0){
    alert('请选择商品')
    return
  }
  ustore.addCart(newList)
}
const toCart =()=>{
  router.push('./cart')
}
</script>


<style lang="less">
    .foodClassify {
      height: 500px;
      background-color: #fff;
      margin-top: 20px;
      border-radius: 20px 20px 0 0;
      background-image: linear-gradient(#fff, #f5f5f5);

      .classify {
        margin-top: 10px;
      }
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        font-size: 18px;
        .store_img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
</style>